import { defineComponent, ref, watch, shallowReactive } from 'vue'

// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // 配置项
    let options: {
      legend: { top: string; orient: string; left: string };
      series: {
        data: any;
        center: string[];
        name: string;
        avoidLabelOverlap: boolean;
        emphasis: { label: { show: boolean; fontSize: number; fontWeight: string } };
        itemStyle: { borderRadius: number };
        label: { show: boolean; position: string };
        labelLine: { show: boolean };
        type: string;
        radius: string[]
      }[];
      tooltip: { trigger: string }
    } = shallowReactive({color:null,tooltip:null,toolbox:null,calculable:null,legend:null,series:null})

    watch(
      () => props.cdata,
      (val: any) => {
        options = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'center',
            left: '1%',
            orient: 'vertical'
          },
          series: [
            {
              center: ['60%', '50%'],
              name: '发电量',
              type: 'pie',
              radius: ['25%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 5
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: val.seriesData
            }
          ]
        };
        // options = {
        //   color: [
        //     '#37a2da',
        //     '#32c5e9',
        //     '#9fe6b8',
        //     '#ffdb5c',
        //     '#ff9f7f',
        //     '#fb7293',
        //     '#e7bcf3',
        //     '#8378ea'
        //   ],
        //   tooltip: {
        //     trigger: 'item',
        //     formatter: '{a} <br/>{b} : {c} ({d}%)'
        //   },
        //   toolbox: {
        //     show: true
        //   },
        //   calculable: true,
        //   legend: {
        //     orient: 'horizontal',
        //     icon: 'circle',
        //     bottom: 0,
        //     x: 'center',
        //     data: val.xData,
        //     textStyle: {
        //       color: '#fff'
        //     }
        //   },
        //   series: [
        //     {
        //       name: '通过率统计',
        //       type: 'pie',
        //       radius: [10, 50],
        //       roseType: 'area',
        //       center: ['50%', '40%'],
        //       itemStyle: {
        //         borderRadius: 5
        //       },
        //       label: {
        //         show: true,
        //         color: "#fff",
        //       },
        //       emphasis: {
        //         label: {
        //           show: false
        //         }
        //       },
        //       data: val.seriesData
        //     }
        //   ]
        // }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "220px"
      const width = "260px"

      return <div>
        <echart ref={chartRef} options={options} height={height} width={width} />
      </div>
    }
  }
})

